<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>biankuanbiangao</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background: yellow;
			margin: 20px;
			float: left;
		}
	</style>
	<script>
		window.onload = function () {
			var aDiv1 = document.getElementById("div1");

				aDiv1.onmouseover = function ()
				{
					startMove1(this, 500);
				};
				aDiv1.onmouseout = function ()
				{
					startMove1(this, 200);
				};
			var aDiv2 = document.getElementById("div2");

			aDiv2.onmouseover = function ()
			{
				startMove2(this, 500);
			};
			aDiv2.onmouseout = function ()
			{
				startMove2(this, 200);
			}

		};
		function startMove1(obj, iTarget)
		{
			clearInterval(obj.timer);
			obj.timer = setInterval(function ()
			{
				var speed = (iTarget - obj.offsetHeight) / 6;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if (obj.offsetHeight== iTarget)
				{
					clearInterval(obj.timer)
				}
				else
				{
					obj.style.height = obj.offsetHeight + speed + "px";
				}

			}, 30)
		}
		function startMove2(obj, iTarget)
		{
			clearInterval(obj.timer);
			obj.timer = setInterval(function ()
			{
				var speed = (iTarget - obj.offsetWidth) / 6;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if (obj.offsetWidth== iTarget)
				{
					clearInterval(obj.timer)
				}
				else
				{
					obj.style.width = obj.offsetWidth + speed + "px";
				}

			}, 30)
		}
	</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>

</body>
</html>